<style lang="less">
  .form .el-col {
    margin-bottom: 0;
  }
  .ulog {
    font-size: 12px;
    color: #303133;
    margin: 5px;
  }
  .auditRemark{
    .el-form-item__content{
      height: auto !important;
    }
  }
  .applyRemark{
    .el-form-item__content{
      height: auto !important;
    }
  }
</style>
<template>
  <div>
    <div>
      <el-row >
        <el-col :span="24">
          <div class="m-2">
            <table class="ui-table center table-component horizontal" cellspacing="0" cellpadding="0">
              <thead>
              </thead>
              <tbody :model="details">
              <tr>
                <th>{{$t('labelSpec.listTable.labelObject')}}</th>
                <td>
									<span v-for="item in labelObject"
                        v-if="details.labelObject == item.item_code"
                        :title="item.item_text"
                  >{{item.item_text}}</span>
                </td>
                <th>{{$t('labelSpec.listTable.labelUpdateFrequency')}}</th>
                <td>
									<span v-for="item in labelUpdateFrequency"
                        v-if="details.labelUpdateFrequency == item.item_code"
                        :title="item.item_text"
                  >{{item.item_text}}</span>
                </td>
              </tr>
              <tr>
                <th>{{$t('labelSpec.listTable.labelCode')}}</th>
                <td>
                  <span :title="details.labelCode">{{details.labelCode}}</span>
                </td>
                <th>{{$t('labelSpec.listTable.labelDatasSource')}}</th>
                <td>
									<span v-for="item in labelDatasSource"
                        v-if="details.labelDatasSource == item.item_code"
                        :title="item.item_text"
                  >{{item.item_text}}</span>
                </td>
              </tr>
              <tr>
                <th>{{$t('labelSpec.listTable.labelName')}}</th>
                <td>
                  <span :title="details.labelName">{{details.labelName}}</span>
                </td>
                <th>{{$t('labelSpec.listTable.labelDataCol')}}</th>
                <td>
                  <span :title="details.labelDataCol">{{details.labelDataCol}}</span>
                </td>
              </tr>
              <tr>
                <th>{{$t('labelSpec.listTable.labelLevelId')}}</th>
                <td>
									<span v-for="item in dialogOptions"
                        v-if="details.labelLevelId == item.labelLevelId"
                        :title="item.labelLevelPathNameDialog"
                  >{{item.labelLevelPathNameDialog}}</span>
                </td>
                <th>{{$t('labelSpec.listTable.labelValueType')}}</th>
                <td>
									<span v-for="item in labelValueType"
                        v-if="details.labelValueType == item.item_code"
                        :title="item.item_text"
                  >{{item.item_text}}</span>
                </td>
              </tr>
              <tr>
                <th>{{$t('labelSpec.listTable.labelDataType')}}</th>
                <td>
									<span v-for="item in labelDataType"
                        v-if="details.labelDataType == item.item_code"
                        :title="item.item_text"
                  >{{item.item_text}}</span>
                </td>
                <th>{{$t('labelSpec.listTable.labelValues')}}</th>
                <td>
                  <span :title="details.labelValuesName">{{details.labelValuesName}}</span>
                </td>
              </tr>
              <tr>
                <th>{{$t('labelSpec.listTable.statusCd')}}</th>
                <td>
									<span v-for="item in labelStatusCd"
                        v-if="details.statusCd == item.item_code"
                        :title="item.item_text"
                  >{{item.item_text}}</span>
                </td>
                <th>{{$t('labelSpec.listTable.statusDate')}}</th>
                <td>
                  <span :title="details.statusDate">{{details.statusDate}}</span>
                </td>
              </tr>
              <tr>
                <th>{{$t('labelSpec.listTable.createStaffName')}}</th>
                <td>
                  <span :title="details.createStaffName">{{details.createStaffName}}</span>
                </td>
                <th>{{$t('labelSpec.listTable.createDate')}}</th>
                <td>
                  <span :title="details.createDate">{{details.createDate}}</span>
                </td>
              </tr>
              <tr>
                <th>{{$t('labelSpec.listTable.businessDesc')}}</th>
                <td>
                  <span :title="details.businessDesc">{{details.businessDesc}}</span>
                </td>
                <th>{{$t('labelSpec.listTable.itDesc')}}</th>
                <td>
                  <span :title="details.itDesc">{{details.itDesc}}</span>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <el-form ref="form" :model="form" :rules="rules" label-width="130px"
                   size="mini" inline label-position="right">
            <el-col :span="24" v-if="modelType=='submitAudit'">
              <el-col :span="24">
                <el-form-item style="width: 100%" :label="$t('labelSpec.listTable.auditStaffName') + ':'"  prop="auditStaff">
                  <!-- <el-input v-model="form.auditStaff" :placeholder="$t('labelSpec.placeholder.auditStaffHint')"></el-input> -->
                  <el-select filterable v-model="form.auditStaff" :placeholder="$t('labelSpec.placeholder.auditStaffHint')">
                    <el-option
                      v-for="item in userAll"
                      :key="item.staffId"
                      :label="item.staffName"
                      :value="item.staffId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item class="applyRemark" style="width: 100%" :label="$t('labelSpec.listTable.applyRemark') + ':'" prop="applyRemark">
                  <el-input maxlength="500" v-model="form.applyRemark" type='textarea'
                            :placeholder="$t('labelSpec.placeholder.applyRemarkHint')"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24" v-if="modelType=='audit'">
              <el-col :span="24">
                <el-form-item style="width: 100%"  :label="$t('labelSpec.listTable.auditResult') + ':'" prop="statusCd">
                  <el-radio v-model="form.statusCd"
                            v-for="item in labelStatusCd"
                            :label="item.item_code"
                            v-if="item.item_code == '1400' || item.item_code == '1500'"
                  >{{item.item_text}}</el-radio>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item style="width: 100%" class="auditRemark" :label="$t('labelSpec.listTable.auditRemark') + ':'" prop="auditRemark">
                  <el-input maxlength="500" v-model="form.auditRemark" type='textarea'
                            :placeholder="$t('labelSpec.placeholder.auditRemarkHint')"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24" class="button_right" v-if="modelType!='detail'" >
              <el-button @click="onClose" v-text="$t('cancelText')"></el-button>
              <el-button type="primary" @click="onSubmit" v-text="$t('ok')"></el-button>
            </el-col>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <div class="block" v-if="(modelType=='edit' || modelType=='detail') && activities.length > 0" style="padding-bottom: 10px;">
      <el-divider></el-divider>
      <div >
        <p class="ulog">{{$t('labelSpec.ulog')}}</p>
        <p v-for="(item , index) in activities"  style="margin-left: 20px;">
          <span>{{index + 1}}、</span><span v-text="actDateFormat(item.statusDate)"></span><span> {{item.operateDesc}}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "sepecDetail",
    props: {
      dialogOptions:{
        type:Array,
        default:[]
      },
      modelType:{
        type:String,
        default:''
      },
      labelId:{
        type:Number,
        default:0
      },
      labelObject:{
        type:Array,
        default:[]
      },
      labelUpdateFrequency:{
        type:Array,
        default:[]
      },
      labelDatasSource:{
        type:Array,
        default:[]
      },
      labelValueType:{
        type:Array,
        default:[]
      },
      labelDataType:{
        type:Array,
        default:[]
      },
      labelStatusCd:{
        type:Array,
        default:[]
      },
    },
    data() {
      return {
        details:{},
        reverse: false,
        activities: [],
        userAll:[],
        rules: {
          applyRemark: [
            { required: true, message: this.$t('labelSpec.rules.applyRemark'), trigger: 'blur' },
            { min: 1, max: 500, message: this.$t('labelSpec.rules.applyRemarkLength'), trigger: 'blur' },
          ],
          auditStaff: [
            { required: true, message: this.$t('labelSpec.rules.auditStaff'), trigger: 'blur' },
          ],
        },
        audit: {
          statusCd: [
            { required: true, message: this.$t('labelSpec.rules.statusCd'), trigger: 'blur' },
          ],
          auditRemark: [
            { required: true, message: this.$t('labelSpec.rules.auditRemark'), trigger: 'blur' },
            { min: 1, max: 500, message: this.$t('labelSpec.rules.auditRemarkLength'), trigger: 'blur' },
          ],
        },
        defaultValue:{
          applyRemark:'',
          auditStaff:'',
          statusCd:'1400',
        },
        form:{
          applyRemark:'',
          auditStaff:'',
        },
        details:{
        },
        labelAuditLogBean:{},
        count:1,
      }
    },
    created() {
      this.init();
    },
    methods: {
      init(){
        this.form = this.defaultValue;
        this.getLabelDetails();
        if (this.modelType == "audit") {
          this.rules = this.audit;
        } else if (this.modelType == 'submitAudit') {
          this.getUserAll();
        }
      },
      actDateFormat(data){
        return dateFormat(new Date(data));
      },
      getLabelDetails(){
        let that = this;
        console.log(that.count);
        that.count++
        this.R.forTaglib.get('/mktlabel/details/' + 16).then(res => {
          if(res.ok ){
            that.form.labelId = res.labelId
            that.details = res;
            // that.details.statusDate = this.actDateFormat(res.statusDate);
            // that.details.createDate = this.actDateFormat(res.createDate);
            that.details.labelValuesName = "";
            res.labelValues.forEach(function (item , index) {
              if (index > 0 ) {
                that.details.labelValuesName + ",";
              }
              that.details.labelValuesName += (index > 0 ? "," : "") + ( item.labelValue + '-->' + item.labelValueName);
            });
            that.activities = res.labelLogs;
            if (this.modelType == "audit") {
              that.labelAuditLogBean  = res.labelAuditlog[res.labelAuditlog.length-1];
              console.log(that.labelAuditLogBean)
            }
          }
        })
      },
      getUserAll(){
        let that = this;
        this.R.forTaglib.get('/mktlabel/queryUserList').then(res => {
          if(res.ok ){
            that.userAll = res.userList
          }
        })
      },
      onSubmit() {
        if (this.modelType == "audit") {
          this.labelAuditLogBean.auditResult = this.form.statusCd;
          this.labelAuditLogBean.auditRemark = this.form.auditRemark;
          this.form.labelAuditLogBean = this.labelAuditLogBean;
        } else{
          this.labelAuditLogBean = {};
          this.form.statusCd=1300;
          this.labelAuditLogBean.applyRemark = this.form.applyRemark;
          this.labelAuditLogBean.auditStaff = this.form.auditStaff;
          this.form.labelAuditLogBean = this.labelAuditLogBean;
        }

        this.$refs.form.validate(valid => {
          if (valid) {
            this.R.forTaglib.postJson('/mktlabel/editLabelStatus', this.form).then(res => {
              if(res.ok ){
                this.$message.success(this.$t('saveSuccess'));
                this.$emit('onDetailSuccess',true);
              }
            }).catch(err => {
              this.$message.error(err.toString())
            });
          }
        })
      },
      onClose() {
        this.$emit('onDetailSuccess',true);
      }
    },
  }
</script>


